<template>
    <div>
        <div class="page-header">
            <CustomTitle title="商家自设质保模板" /><el-button type="primary" plain
                @click="router.push('/stencil/warranty')">返回</el-button>
        </div>
        <div class="app-container">
            <div class="hint" v-if="isShowGoodList">
                <div>
                    <el-icon>
                        <WarningFilled />
                    </el-icon>商品附加信息模板不会自动与产品关联，您可以在创建模板后，批量关联需要存在商品上。
                </div>
                <span @click="isShowGoodList = false">不再提醒</span>
            </div>
            <div class="search-head">
                <el-space>
                    <span>自设商品质保模板</span>
                    <el-select placeholder="请选择" style="width: 250px;" v-model="goodsParams.warrantyId"
                        @change="changeTemp">
                        <el-option v-for="item in allTemp" :value="item.warrantyId" :key="item.warrantyId"
                            :label="item.warrantyName" />
                    </el-select>
                </el-space>
                <el-space>
                    <el-button type="primary" plain @click="editTempSys(null)">批量修改关联商品质保</el-button>
                    <el-button type="primary" @click="router.push({
                    path: '/stencil/warranty/related',
                    query: {
                        warrantyId: goodsParams.warrantyId,
                        warrantyName: goodsParams.warrantyName
                    }
                })">添加关联商品</el-button>
                </el-space>
            </div>
            <el-row class="table-head">
                <el-col :span="1">
                    <el-checkbox @change="setCheckAll" v-model="checkAll"
                        :indeterminate="isIndeterminate"></el-checkbox>
                </el-col>
                <el-col :span="2">
                    商品图
                </el-col>
                <el-col :span="5">
                    商品信息
                </el-col>
                <el-col :span="5">
                    更新时间
                </el-col>
                <el-col :span="6">
                    展示状态
                </el-col>
                <el-col :span="5">
                    操作
                </el-col>
            </el-row>
            <el-scrollbar :max-height="`calc(100vh - ${isShowGoodList ? 400 : 320}px)`">
                <el-empty v-if="!data.length && !loading" />
                <div class="loading" v-if="loading && !data.length" v-loading="loading"></div>
                <el-checkbox-group v-model="checkedList">
                    <el-row class="table-item" v-for="item in data" :key="item.id">
                        <el-col :span="1">
                            <el-checkbox :value="item.productId" @change="checked"></el-checkbox>
                        </el-col>
                        <el-col :span="2">
                            <img :src="item.mainPicUrl" alt="">
                        </el-col>
                        <el-col :span="5">
                            <div class="info">
                                <div class="name">{{ item.productName }}</div>
                                <div>上架类目：{{ item.preview }}</div>
                                <div>型号：{{ item.businessModelCode }}</div>
                                <div>分类：{{ item.categoryName }}</div>
                                <div>ID：{{ item.productId }}</div>
                            </div>
                        </el-col>
                        <el-col :span="5">
                            {{ item.updateTime }}
                        </el-col>
                        <el-col :span="6">
                            <Status :goods="item" />
                        </el-col>
                        <el-col :span="5">
                            <el-button link type="primary" @click="editTempSys(item)">修改模板设置</el-button>
                        </el-col>
                    </el-row>
                </el-checkbox-group>
                <div class="pagination">
                    <el-pagination v-model:current-page="goodsParams.page" v-model:page-size="goodsParams.size"
                        :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="total"
                        @size-change="init" @current-change="init" />
                </div>
            </el-scrollbar>
            <el-dialog v-model="editVisible" width="500" center align-center :show-close="false">
                <template #title>
                    <CustomTitle title="删除商品附加信息模板" />
                </template>
                <el-form label-position="top" :model="editParams">
                    <el-form-item label="该商品附加信息模板有关联商品信息，如果删除请修改模板设置">
                        <el-radio-group v-model="editParams.type">
                            <el-radio label="商家自设质保" :value="1"></el-radio>
                            <el-radio label="没有质保" :value="2"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="选择商品附加信息模板" v-if="editParams.type == 1">
                        <el-select placeholder="请选择" v-model="editParams.choiceWarrantyId" @change="checkTemp">
                            <el-option v-for="item in allTemp.filter(v => v.warrantyId != goodsParams.warrantyId)"
                                :value="item.warrantyId" :key="item.warrantyId" :label="item.warrantyName" />
                        </el-select>
                    </el-form-item>
                </el-form>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="editVisible = false">取 消</el-button>
                        <el-button type="primary" @click="confirmEditTemp">确 定</el-button>
                    </span>
                </template>
            </el-dialog>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { goodsList, getAllTemplate, editSys } from "@/apis/mallConfig/warranty";
import { ElMessage } from "element-plus";
import { useLocalStorage } from '@vueuse/core';
import CustomTitle from "@/components/CustomTitle";
import Status from "@/components/Status/index.vue";

const isShowGoodList = useLocalStorage('isShowGoodList', true);

const route = useRoute();
const router = useRouter();
const goodsParams = ref({
    page: 1,
    size: 10,
    warrantyId: '',
    warrantyName: ''
});
const checkedList = ref([])
const editVisible = ref(false)
const total = ref(0)
const data = ref([])
const loading = ref(false);
const editParams = ref({
    type: 2,
    choiceWarrantyName: '',
    choiceWarrantyId: '',
    ids: []
})
const checkAll = ref(false);
const isIndeterminate = ref(false);
const checked = () => {
    if ((!checkedList.value.length) || (!data.value.length)) {
        checkAll.value = false;
        isIndeterminate.value = false;
        return;
    };
    checkAll.value = checkedList.value.length == data.value.length;
    isIndeterminate.value = checkedList.value.length != data.value.length;
}
const setCheckAll = () => {
    if (checkAll.value) {
        checkedList.value = data.value.map(v => v.productId);
    } else {
        checkedList.value = [];
    }
    isIndeterminate.value = false;
}
const init = async () => {
    const res = await goodsList({
        type: 1,
        ...goodsParams.value,
        warrantyId: goodsParams.value.warrantyId || route.query.warrantyId
    })
    data.value = res.data.records;
    loading.value = false;
    total.value = res.data.total;
    checked()
}
const allTemp = ref([])
const getAllTemp = async () => {
    const res = await getAllTemplate({});
    allTemp.value = res.data;
}

const editTempSys = (item) => {
    if (item || checkedList.value.length) {
        if (item) {
            editParams.value.ids = [item].map(v => v.productId);
        } else {
            editParams.value.ids = checkedList.value;
        }
        editVisible.value = true;
    } else {
        ElMessage.error('请选择商品')
    }
}
const confirmEditTemp = async () => {
    const res = await editSys(editParams.value);
    if (res.code == 200) {
        checkedList.value = checkedList.value.filter(v => !editParams.value.ids.includes(v));
        ElMessage.success('修改成功');
        editVisible.value = false;
        init();
    }
}
const changeTemp = (value) => {
    const warrantyName = allTemp.value.filter(v => v.warrantyId == value)[0].warrantyName;
    const query = {
        warrantyName,
        warrantyId: value
    }
    goodsParams.value = { ...goodsParams.value, ...query };
    router.replace({ path: '/stencil/warranty/goodsList', query })
    init()
}
const checkTemp = () => {
    editParams.value.choiceWarrantyName = allTemp.value.filter(v => v.warrantyId == editParams.value.choiceWarrantyId)[0].warrantyName;
}
onMounted(() => {
    getAllTemp();
    loading.value = true;
    goodsParams.value = { ...goodsParams.value, warrantyId: route.query.warrantyId, warrantyName: route.query.warrantyName };
    init();
})
</script>

<style lang="scss" scoped>
@import 'index'
</style>